<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>设置账号</title>
    <link href="../static/lib/bootstrap/css/bootstrap.css" th:href="@{/lib/bootstrap/css/bootstrap.min.css}"
          rel="stylesheet"/>
</head>
<body>
<div id="logo-bar">
    <img src="../static/img/logo.png" th:src="@{/img/logo.png}" class="img-responsive">
</div>
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <p>您已经办理完入驻，请设置您团队的账号。</p>
                <p>该账号可以用于登录<a href="team-login.html" th:href="@{/team-login}">创客空间</a>，对您团队的一些事务进行管理。</p>
                <form>
                    <div class="form-group">
                        <label for="accountName">账号</label>
                        <input type="text" class="form-control" id="accountName" value="20170608" th:value="${teamId}"
                               disabled/>
                    </div>
                    <div class="form-group">
                        <label for="passwordCode">密码</label>
                        <input type="password" class="form-control" id="passwordCode" value=""/>
                        <span class="text-success">提示:密码为6到20位的英文、数字或下划线组合</span>
                    </div>
                    <div class="form-group">
                        <label for="passwordValify">再次输入密码</label>
                        <input type="password" class="form-control" id="passwordValify" value=""/>
                        <span class="text-danger" id="password-hint" style="display: none">密码不一致!</span>
                    </div>
                    <button class="btn btn-primary" type="button" id="submit-btn">
                        提交
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="../static/lib/jquery/jquery.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var requestRootUrl = /*[[@{/}]]*/ "http://rapapi.org/mockjs/22290/";
    var successRedirectUrl = /*[[@{/}]]*/ "index.html";
    /*]]>*/
    var passwordPattern = new RegExp("^[0-9a-zA-Z_]{6,20}$");

    // 验证密码
    function valifyCode() {
        var passwordCode = $("#passwordCode").val();
        var passwordValify = $("#passwordValify").val();

        console.log(passwordCode);
        console.log(passwordValify);

        if (!(passwordCode && passwordValify)) {
            return;
        }

        if (passwordCode !== passwordValify) {
            $("#password-hint").show();
        } else {
            $("#password-hint").hide();
        }
    }

    $("#passwordCode").change(valifyCode);
    $("#passwordValify").change(valifyCode);

    // 提交验证
    $("#submit-btn").click(function (e) {
        var accountName = $("#accountName").val();
        var passwordCode = $("#passwordCode").val();
        var passwordValify = $("#passwordValify").val();

        if (!passwordCode) {
            alert("密码不能为空!");
            return;
        }

        if (!passwordValify) {
            alert("请验证你的密码!");
            return;
        }

        if (passwordCode !== passwordValify) {
            alert("密码不一致!");
            $("#password-hint").show();
            return;
        } else {
            $("#password-hint").hide();
        }

        if (!passwordPattern.test(passwordCode)) {
            alert("密码格式不符合要求!");
            return;
        }

        if (!confirm("确定要提交吗?")) {
            return;
        }

        var dataObj = {
            teamId: accountName,
            password: passwordCode,
        };

        $.ajax({
            url: requestRootUrl + "api/team-in/set-team-account",
            contentType: "application/json",
            type: "post",
            data: JSON.stringify(dataObj),
            success: function (resp) {
                window.location.href = successRedirectUrl;
            }
        });


    });
</script>
</body>
</html>